"use client";
import Link from "next/link";
import {  usePathname } from "next/navigation";
import { useState } from "react";

export default function DashboardLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
    const [count, setCount] = useState(0);
    const pathname =  usePathname()
    console.log(pathname)
  return (
  <div className="border-2 border-dashed border-black p4 w-1/2 mx-auto">
     <div className="flex gap-4 font-bold text-lg mb-4 ">
        <Link className={pathname === "/dashboard/about" ? "text-red-500" : ""} href={"/dashboard/about"}>Dashboard about</Link> 
        <Link className={pathname === "/dashboard/setting" ? "text-red-500" : ""} href="/dashboard/setting">Dashboard setting</Link>
     </div>
     <h2>Dashboard Layout {count}</h2>
     <button className="bg-black text-white px-4 py-2 rounded-md" type="button" onClick={() => setCount(count + 1)} >加一</button>
        {children}
   </div>
  );
}